<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <meta name="keywords" content="城市三级联动,行政区划,省市区,区划代码,联动插件">
        <meta name="description" content="一套简单实用的行政区划选择插件，结合最新的省、市、区、街道数据；独立的数据包极大地方便了插件的更新和使用。">
        <title>城市三级联动 - citys</title>
        <link rel="shortcut icon" href="../static/image/favicon.png">
        <link rel="stylesheet" type="text/css" href="../static/style/common.css">
        <style type="text/css">
            .mod-panel .box {
                margin-bottom: 25px;
            }
            .mod-panel .box .recommend{
                padding: 15px 20px;
                margin-bottom: 10px;
                background: #fff7ed;
                border: 1px solid rgba(0,0,0,0.05);
                border-radius: 6px;
            }
            .mod-panel .box .citys{
                margin-bottom: 10px;
            }
            .mod-panel .box p {
                line-height: 28px;
            }
            .mod-panel .box select{
                height: 32px;
                padding: 0 10px;
                border: 1px solid #e8e8e8;
                border-radius: 4px;
                outline: none;
            }
            .mod-panel .warning {
                color: #c00;
            }
            .mod-panel a {
                margin-right: 8px;
                color: #369;
            }
        </style>
        <script type="text/javascript" src="../static/script/jquery.min.js"></script>
        <script type="text/javascript" src="../code/jquery.citys.js"></script>
        <script src="https://pv.sohu.com/cityjson"></script>
    </head>
    <body>
        <div class="wrapper">
            <header>
                <div class="mod-head">
                    <div class="inner">
                        <div class="bd">
                            <div class="logo">
                                <a href="/"><img src="../static/image/public/logo.png" width="180" height="64" alt="路人甲"></a>
                            </div>
                            <nav>
                            </nav>
                            <div class="operation">
                                <a class="btn" href="https://passer-by.com" target="_blank">个人网站</a>
                                <a class="btn" href="https://github.com/mumuy/widget/" rel="nofollow" target="_blank" title="Github">
                                    <svg aria-hidden="true" class="octicon" title="GitHub " version="1.1" viewBox="0 0 16 16" width="24" height="24"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59 0.4 0.07 0.55-0.17 0.55-0.38 0-0.19-0.01-0.82-0.01-1.49-2.01 0.37-2.53-0.49-2.69-0.94-0.09-0.23-0.48-0.94-0.82-1.13-0.28-0.15-0.68-0.52-0.01-0.53 0.63-0.01 1.08 0.58 1.23 0.82 0.72 1.21 1.87 0.87 2.33 0.66 0.07-0.52 0.28-0.87 0.51-1.07-1.78-0.2-3.64-0.89-3.64-3.95 0-0.87 0.31-1.59 0.82-2.15-0.08-0.2-0.36-1.02 0.08-2.12 0 0 0.67-0.21 2.2 0.82 0.64-0.18 1.32-0.27 2-0.27 0.68 0 1.36 0.09 2 0.27 1.53-1.04 2.2-0.82 2.2-0.82 0.44 1.1 0.16 1.92 0.08 2.12 0.51 0.56 0.82 1.27 0.82 2.15 0 3.07-1.87 3.75-3.65 3.95 0.29 0.25 0.54 0.73 0.54 1.48 0 1.07-0.01 1.93-0.01 2.2 0 0.21 0.15 0.46 0.55 0.38C13.71 14.53 16 11.53 16 8 16 3.58 12.42 0 8 0z"></path></svg>
                                    <span>Github</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <div class="container">
                <div class="inner">
                    <section class="mod-panel">
                        <div class="hd">
                            <h3 class="title">城市三级联动 - citys</h3>
                        </div>
                        <div class="bd">
                            <div class="box">
                                <div class="recommend">
                                    <p>基于Web Components的组件：<a href="https://passer-by.com/widget-region" target="_blank">行政区划选择器</a></p>
                                    <div>
                                        <widget-region value="浙江省杭州市钱塘区"></widget-region>
                                    </div>
                                </div>
                            </div>
                            <div class="box">
                                <div id="location" class="citys">
                                    <p>您现在的位置：</p>
                                    <p>
                                        <select name="province"></select>
                                        <select name="city"></select>
                                        <select name="district"></select>
                                    </p>
                                </div>
                                <div class="code">
                                    <p>根据IP地址定位：<a href="https://passer-by.com/api/#docs/ip" target="_blank">IP接口文档</a></p>
                                </div>
                                <script type="text/javascript">
                                    if (returnCitySN) {
                                        $('#location').citys({ code: returnCitySN['cid'] });
                                    }
                                </script>
                            </div>
                            <div class="box">
                                <div id="demo" class="citys">
                                    <p>
                                        <select name="province"></select>
                                        <select name="city"></select>
                                        <select name="district"></select>
                                    </p>
                                </div>
                                <div class="code">
                                    <p>通过地区编码初始化设置</p>
                                    <p>$('#demo').citys({code:350206});</p>
                                </div>
                                <script type="text/javascript">
                                    $('#demo').citys({ code: 350206 });
                                </script>
                            </div>
                            <div class="box">
                                <div id="demo1" class="citys">
                                    <p>
                                        <select name="province"></select>
                                        <select name="city"></select>
                                        <select name="district"></select>
                                    </p>
                                </div>
                                <div class="code">
                                    <p>通过地区名称初始化设置，并且下拉框值为地区名称</p>
                                    <p>$('#demo1').citys({valueType:'name',province:'福建',city:'厦门',district:'思明'});</p>
                                </div>
                                <script type="text/javascript">
                                    $('#demo1').citys({ valueType: 'name', province: '福建', city: '厦门', district: '思明' });
                                </script>
                            </div>
                            <div class="box">
                                <div id="demo2" class="citys">
                                    <p>
                                        <select name="province"></select>
                                        <select name="city"></select>
                                        <select name="district"></select>
                                    </p>
                                    <p id="place">请选择地区</p>
                                </div>
                                <div class="code">
                                    <p>事件处理</p>
<code><pre>$('#demo2').citys({
    required:false,
    nodata:'disabled',
    onChange:function(data){
        var text = data['direct']?'(直辖市)':'';
        $('#place').text('当前选中地区：'+data['province']+text+' '+data['city']+' '+data['district']);
    }
});</pre></code>
                                </div>
                                <script type="text/javascript">
                                    $('#demo2').citys({
                                        required: false,
                                        nodata: 'disabled',
                                        onChange: function (data) {
                                            var text = data['direct'] ? '(直辖市)' : '';
                                            $('#place').text('当前选中地区：' + data['province'] + text + ' ' + data['city'] + ' ' + data['district']);
                                        }
                                    });
                                </script>
                            </div>
                            <div class="box">
                                <div id="demo3" class="citys">
                                    <p>
                                        <select name="province"></select>
                                        <select name="city"></select>
                                        <select name="district"></select>
                                        <select name="town"></select>
                                    </p>
                                </div>
                                <div class="code">
                                    <p>扩展显示行政区划第四级(街道)信息：</p>
<code><pre>var $town = $('#demo3 select[name="town"]');
var townFormat = function(info){
$town.hide().empty();
if(info['code']%1e4&&info['code']<7e6){	//是否为“区”且不是港澳台地区
    $.ajax({
        url:'https://passer-by.com/data_location/code/'+info['code']+'.json',
        dataType:'json',
        success:function(town){
            $town.show();
            for(i in town){
                    $town.append('&lt;option value="'+i+'"&gt;'+town[i]+'&lt;/option&gt;');
            }
        }
    });
}
};
$('#demo3').citys({
    province:'福建',
    city:'厦门',
    district:'思明',
    onChange:function(info){
        townFormat(info);
    }
},function(api){
    var info = api.getInfo();
    townFormat(info);
});</pre></code>
                                </div>
                                <script type="text/javascript">
                                    var $town = $('#demo3 select[name="town"]');
                                    var townFormat = function (info) {
                                        $town.hide().empty();
                                        if (info['code'] % 1e4 && info['code'] < 7e5) {	//是否为“区”且不是港澳台地区
                                            $.ajax({
                                                url: 'https://passer-by.com/data_location/code/' + info['code'] + '.json',
                                                dataType: 'json',
                                                success: function (town) {
                                                    $town.show();
                                                    for (i in town) {
                                                        $town.append('<option value="' + i + '">' + town[i] + '</option>');
                                                    }
                                                }
                                            });
                                        }
                                    };
                                    $('#demo3').citys({
                                        province: '福建',
                                        city: '厦门',
                                        district: '思明',
                                        onChange: function (info) {
                                            townFormat(info);
                                        }
                                    }, function (api) {
                                        var info = api.getInfo();
                                        townFormat(info);
                                    });
                                </script>
                            </div>
                            <div class="example">
                                <div class="code">
                                    <h1>调用方法：</h1>
                                    <p>$(selector).citys(options,callback);</p>
                                </div>
                                <div class="table-outer">
                                    <h2>options参数</h2>
                                    <div class="table-inner">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th width="150">参数</th>
                                                    <th width="120">默认值</th>
                                                    <th>说明</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>dataUrl</td>
                                                    <td>[数据库地址]</td>
                                                    <td>
                                                        <p>最新数据库（
                                                            <script src="https://passer-by.com/data_location/version.js"></script>）：<a
                                                                href="https://passer-by.com/data_location/list.json" target="_blank">JSON格式</a><a
                                                                href="https://passer-by.com/data_location/list.jsonp" target="_blank">JSONP格式</a>
                                                        </p>
                                                        <p>数据库项目：<a href="https://github.com/mumuy/data_location"
                                                                target="_blank">中国行政区划（省、市、区、街道）</a></p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>dataType</td>
                                                    <td>'json'</td>
                                                    <td>
                                                        <p>数据库类型:'json'或'jsonp'</p>
                                                        <p class="warning">IE9-由于默认安全设置，需开启“通过域访问数据源”才能跨域访问json，此类情况建议使用jsonp格式</p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>crossDomain</td>
                                                    <td>true</td>
                                                    <td>
                                                        <p>是否开启跨域</p>
                                                        <p class="warning">IE9-如果设置开启跨域而实际未跨域，造成请求异常</p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>provinceField</td>
                                                    <td>'province'</td>
                                                    <td>省份(省级)字段名</td>
                                                </tr>
                                                <tr>
                                                    <td>cityField</td>
                                                    <td>'city'</td>
                                                    <td>城市(地级)字段名</td>
                                                </tr>
                                                <tr>
                                                    <td>districtField</td>
                                                    <td>'district'</td>
                                                    <td>地区(县区级)字段名</td>
                                                </tr>
                                                <tr>
                                                    <td>valueType</td>
                                                    <td>'code'</td>
                                                    <td>下拉框值的类型,code行政区划代码,name地名</td>
                                                </tr>
                                                <tr>
                                                    <td>code</td>
                                                    <td>0</td>
                                                    <td>地区编码</td>
                                                </tr>
                                                <tr>
                                                    <td>province</td>
                                                    <td>[无]</td>
                                                    <td>省份(省级),可以为地区编码或者名称</td>
                                                </tr>
                                                <tr>
                                                    <td>city</td>
                                                    <td>[无]</td>
                                                    <td>城市(地级),可以为地区编码或者名称</td>
                                                </tr>
                                                <tr>
                                                    <td>district</td>
                                                    <td>[无]</td>
                                                    <td>地区(县区级),可以为地区编码或者名称</td>
                                                </tr>
                                                <tr>
                                                    <td>required</td>
                                                    <td>true</td>
                                                    <td>是否必须选中(是否自动选择地区)</td>
                                                </tr>
                                                <tr>
                                                    <td>nodata</td>
                                                    <td>'hidden'</td>
                                                    <td>当无数据时的表现形式:'hidden'隐藏,'disabled'禁用,为空不做任何处理</td>
                                                </tr>
                                                <tr>
                                                    <td>placeholder</td>
                                                    <td>' - 请选择 - '</td>
                                                    <td>非必要选择是，默认空值的文本内容</td>
                                                </tr>
                                                <tr>
                                                    <td>onChange(info)</td>
                                                    <td>[无]</td>
                                                    <td>地区切换时触发,回调函数传入地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,district地区(县区级)名称,code地区编码
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="table-outer">
                                    <h2>callback(api)参数</h2>
                                    <div class="table-inner">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th width="200">方法</th>
                                                    <th>说明</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>getInfo(data)</td>
                                                    <td>获取当前选中的地区信息:direct是否为直辖市,province省份(省级)名称,city城市(地级)名称,district地区(县区级)名称,code地区编码</td>
                                                </tr>
                                                <tr>
                                                    <td>setCode(code)</td>
                                                    <td>通过code设置地区</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>                            
                            </div>
                        </div>
                    </section>
                    <script type="text/javascript" src="https://passer-by.com/static/script/projects.js"></script>
                </div>
            </div>
            <footer>
                <div class="mod-fixedbar">
                    <div class="bd">
                        <ul>
                            <li>
                                <a class="gotop" href="javascript:;" rel="nofollow">
                                    <img src="../static/image/public/icon-gotop.png" width="24" height="24" alt="回到顶部">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mod-foot">
                    <div class="bd">
                        <p>
                            <span>Copyright &copy; 2025</span>
                            <a href="/">jquerywidget.com</a>
                            <span>版权所有</span>
                        </p>
                    </div>
                </div>
            </footer>
        </div>
        <script type="text/javascript" src="https://passer-by.com/widget-region/dist/widget-region.min.js"></script>
        <script type="text/javascript" src="../static/script/common.js"></script>
        <script type="text/javascript" src="../static/script/stat.js"></script>
    </body>
</html>